<!-- register -->
<template>
  <div class="app_contain">
    <div class="contain">
      <header></header>
      <div class="center">
        <div class="login_card">
          <img src="@/assets/img/logo.svg" alt="logo" />
          <el-steps :active="0" finish-status="success" align-center>
            <el-step title="填写信息"></el-step>
            <el-step title="安全验证"></el-step>
          </el-steps>
          <div class="tip_text">手机号</div>
          <el-input
            placeholder="请输入账号"
            v-model="$store.state.login.account"
            hidden
            autocomplete="new-password"
            size="large"
          >
          </el-input>
          <div class="tip_text">密码</div>
          <el-input
            placeholder="请输入密码"
            v-model="$store.state.login.password"
            hidden
            autocomplete="new-password"
            show-password
          >
          </el-input>
          <div class="tip_text">
              用户名
            </div>
          <el-tooltip placement="top">
            <div slot="content">手机号和用户名均可做为登录账号</div>
            <el-input
              placeholder="请输入密码"
              v-model="$store.state.login.username"
              hidden
              autocomplete="new-password"
            >
            </el-input>
          </el-tooltip>

          <div class="login_btn_contain" @click="register">注册</div>
        </div>
        <div class="register">
          <span>已有账号？</span>
          <el-link type="primary" @click="tologin">登录</el-link>
        </div>
      </div>
      <footer></footer>
    </div>
  </div>
</template>

<script>
import {
  test_account_phone,
  test_account_email,
  test_account_username,
} from "../../api/login";
export default {
  name: "register",
  data() {
    return {
      timerId: null,
      check_account_phone:
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      check_account_email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
      notaccount: "账号格式不合法",
      notusername: "格式不合法",
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log(vm);
      // 通过 `vm` 访问组件实例
      if (from.name === "register_captcha") {
        vm.notaccount = false;
        vm.notusername = false;
      }
    });
  },
  watch: {
    "$store.state.login.account"() {
      if (this.$store.state.login.account !== "") {
        if (this.timerId !== null) {
          clearTimeout(this.timerId);
        }
        this.timerId = setTimeout(() => {
          if (this.check_account_phone.test(this.$store.state.login.account)) {
            test_account_phone(this.$store.state.login.account).then((data) => {
              if (data.data.message) {
                this.$message({
                  message: data.data.message,
                  type: "warning",
                });
                this.notaccount = data.data.message;
              } else {
                this.notaccount = false;
              }
            });
          } else if (
            this.check_account_email.test(this.$store.state.login.account)
          ) {
            test_account_email(this.$store.state.login.account).then((data) => {
              if (data.data.message) {
                this.$message({
                  message: data.data.message,
                  type: "warning",
                });
                this.notaccount = data.data.message;
              } else {
                this.notaccount = false;
              }
            });
          } else {
            this.notaccount = "账号格式不合法";
          }
          this.timerId = null;
        }, 500);
      }
    },
    "$store.state.login.username"() {
      if (this.$store.state.login.username !== "") {
        if (this.timerId !== null) {
          clearTimeout(this.timerId);
        }
        this.timerId = setTimeout(() => {
          if (
            this.$store.state.login.username.length < 2 ||
            this.$store.state.login.username.length > 64
          ) {
            this.notusername = "真实姓名必须为2位到64位";
          } else {
            test_account_username(this.$store.state.login.username).then(
              (data) => {
                if (data.data.message) {
                  this.$message({
                    message: data.data.message,
                    type: "warning",
                  });
                  this.notusername = data.data.message;
                } else {
                  this.notusername = false;
                }
              }
            );
          }
          this.timerId = null;
        }, 300);
      }
    },
  },
  methods: {
    async register() {
      if (!this.$store.state.login.account) {
        this.$message.warning("请输入账号");
      } else if (!this.$store.state.login.password) {
        this.$message.warning("请输入密码");
      } else if (!this.$store.state.login.username) {
        this.$message.warning("请输入用户名");
      } else if (this.notaccount) {
        this.$message.error(this.notaccount);
      } else if (this.notusername) {
        this.$message.error(this.notusername);
      } else {
        sessionStorage.setItem(
          "userinfo",
          JSON.stringify({
            account: this.$store.state.login.account,
            password: this.$store.state.login.password,
            username: this.$store.state.login.username,
          })
        );
        this.$router.push("/register_captcha");
      }
    },
    tologin() {
      this.$router.push("/login");
    },
  },
};
</script >

<style lang='scss' scoped>
@import "@/assets/css/login.scss";
.tip_text {
  color: rgba(0, 0, 0, 0.6);
}
.el-input {
  margin-top: 6px !important;
}
</style>